<!DOCTYPE html>



  


<html class="theme-next pisces use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">










<meta name="description" content="原date: 2018-11-20 14:35:18 链接官方API链接官方实例链接官方Gallery更多实例链接 在vue中如何使用链接 常见通用配置项123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566">
<meta property="og:type" content="article">
<meta property="og:title" content="echarts超全超详情配置项">
<meta property="og:url" content="http://yoursite.com/2020/09/08/echarts超全超详情配置项/index.html">
<meta property="og:site_name" content="春风自是人间客">
<meta property="og:description" content="原date: 2018-11-20 14:35:18 链接官方API链接官方实例链接官方Gallery更多实例链接 在vue中如何使用链接 常见通用配置项123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://wx3.sinaimg.cn/large/0069qZtTgy1gij1jm6zqjj30zw0han25.jpg">
<meta property="og:image" content="https://wx2.sinaimg.cn/large/0069qZtTgy1gijgt6p502j306h05owf2.jpg">
<meta property="og:image" content="https://wx2.sinaimg.cn/large/0069qZtTgy1gijgurb2syj30cw07eq4h.jpg">
<meta property="og:updated_time" content="2020-11-23T14:02:51.527Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="echarts超全超详情配置项">
<meta name="twitter:description" content="原date: 2018-11-20 14:35:18 链接官方API链接官方实例链接官方Gallery更多实例链接 在vue中如何使用链接 常见通用配置项123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566">
<meta name="twitter:image" content="https://wx3.sinaimg.cn/large/0069qZtTgy1gij1jm6zqjj30zw0han25.jpg">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: "",
      labels: ""
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2020/09/08/echarts超全超详情配置项/">





  <title>echarts超全超详情配置项 | 春风自是人间客</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">春风自是人间客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description">是非成败转头空，青山依旧在，几度夕阳红。</h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-program">
          <a href="/categories/program" rel="section">
            
            程序
          </a>
        </li>
      
        
        <li class="menu-item menu-item-reading">
          <a href="/categories/reading" rel="section">
            
            阅读
          </a>
        </li>
      
        
        <li class="menu-item menu-item-idea">
          <a href="/categories/idea" rel="section">
            
            想法
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
            关于我
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/09/08/echarts超全超详情配置项/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="彭丹丹">
      <meta itemprop="description" content>
      <meta itemprop="image" content="https://upload.jianshu.io/users/upload_avatars/830956/debe5156eed7?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="春风自是人间客">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">echarts超全超详情配置项</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-09-08T14:35:18+08:00">
                2020-09-08
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/program/" itemprop="url" rel="index">
                    <span itemprop="name">program</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  3,127
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  16
                </span>
              
            </div>
          

          
          
        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>原date: 2018-11-20 14:35:18</p>
<h1 id="链接"><a href="#链接" class="headerlink" title="链接"></a>链接</h1><p><a href="https://echarts.apache.org/zh/option.html" target="_blank" rel="noopener">官方API链接</a><br><a href="https://echarts.apache.org/examples/zh/index.html" target="_blank" rel="noopener">官方实例链接</a><br><a href="https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all" target="_blank" rel="noopener">官方Gallery更多实例链接</a></p>
<h1 id="在vue中如何使用"><a href="#在vue中如何使用" class="headerlink" title="在vue中如何使用"></a>在vue中如何使用</h1><p><a href="https://firefly1984982452.github.io/2020/05/08/%E6%96%B0%E5%BB%BAvue%E9%A1%B9%E7%9B%AE%E4%B9%8B%E5%90%8E%E8%A6%81%E6%90%AD%E5%BB%BA%E7%9A%84%E9%A1%B9%E7%9B%AE%E6%A1%86%E6%9E%B6" target="_blank" rel="noopener">链接</a></p>
<h1 id="常见通用配置项"><a href="#常见通用配置项" class="headerlink" title="常见通用配置项"></a>常见通用配置项</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br></pre></td><td class="code"><pre><span class="line">option = &#123;</span><br><span class="line">    // 标题组件，包含主标题和副标题</span><br><span class="line">    title: &#123;</span><br><span class="line">        text: &apos;世界人口总量&apos;,</span><br><span class="line">        subtext: &apos;数据来自网络&apos;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    // 图例组件</span><br><span class="line">    legend: &#123;</span><br><span class="line">        data: [&apos;2011年&apos;, &apos;2012年&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    // 上下左右及大小-设置图表占总面积的地方</span><br><span class="line">    grid:&#123;x: &apos;5%&apos;, y: &apos;2%&apos;, width: &apos;80%&apos;, height: &apos;90%&apos;&#125;,</span><br><span class="line"></span><br><span class="line">    dataset: &#123;</span><br><span class="line">        // 用 dimensions 指定了维度的顺序。直角坐标系中，</span><br><span class="line">        // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。</span><br><span class="line">        // 如果不指定 dimensions，也可以通过指定 series.encode</span><br><span class="line">        // 完成映射，参见后文。</span><br><span class="line">        dimensions: [&apos;product&apos;, &apos;2015&apos;, &apos;2016&apos;, &apos;2017&apos;],</span><br><span class="line">        source: [</span><br><span class="line">            &#123;product: &apos;Matcha Latte&apos;, &apos;2015&apos;: 43.3, &apos;2016&apos;: 85.8, &apos;2017&apos;: 93.7&#125;,</span><br><span class="line">            &#123;product: &apos;Milk Tea&apos;, &apos;2015&apos;: 83.1, &apos;2016&apos;: 73.4, &apos;2017&apos;: 55.1&#125;,</span><br><span class="line">            &#123;product: &apos;Cheese Cocoa&apos;, &apos;2015&apos;: 86.4, &apos;2016&apos;: 65.2, &apos;2017&apos;: 82.5&#125;,</span><br><span class="line">            &#123;product: &apos;Walnut Brownie&apos;, &apos;2015&apos;: 72.4, &apos;2016&apos;: 53.9, &apos;2017&apos;: 39.1&#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;,</span><br><span class="line">    // grid坐标系的x轴</span><br><span class="line">    xAxis: &#123;</span><br><span class="line">        type: &apos;category&apos;,</span><br><span class="line">    &#125;,</span><br><span class="line">    // grid坐标系的y轴</span><br><span class="line">    yAxis: &#123;</span><br><span class="line">        type: &apos;category&apos;,</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    // 区域缩放</span><br><span class="line">    dataZoom: [</span><br><span class="line">        &#123;</span><br><span class="line">            type: &apos;slider&apos;,</span><br><span class="line">            show: true,</span><br><span class="line">            start: 0,</span><br><span class="line">            end: 100,</span><br><span class="line">            handleSize: 8</span><br><span class="line">        &#125;,</span><br><span class="line">    ],</span><br><span class="line"></span><br><span class="line">    // 提示框组件</span><br><span class="line">    tooltip: &#123;</span><br><span class="line">        trigger: &apos;axis&apos;,</span><br><span class="line">        axisPointer: &#123;</span><br><span class="line">            type: &apos;shadow&apos;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    //工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。</span><br><span class="line">    toolbox: &#123;</span><br><span class="line">        feature: &#123;</span><br><span class="line">            dataZoom: &#123;</span><br><span class="line">                yAxisIndex: &apos;none&apos;</span><br><span class="line">            &#125;,</span><br><span class="line">            restore: &#123;&#125;,</span><br><span class="line">            saveAsImage: &#123;&#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    // 单独的数据集声明</span><br><span class="line">    dataset: &#123;</span><br><span class="line">        // 用 dimensions 指定了维度的顺序。直角坐标系中，</span><br><span class="line">        // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。</span><br><span class="line">        // 如果不指定 dimensions，也可以通过指定 series.encode</span><br><span class="line">        // 完成映射，参见后文。</span><br><span class="line">        dimensions: [&apos;product&apos;, &apos;2015&apos;, &apos;2016&apos;, &apos;2017&apos;],</span><br><span class="line">        source: [</span><br><span class="line">            &#123;product: &apos;Matcha Latte&apos;, &apos;2015&apos;: 43.3, &apos;2016&apos;: 85.8, &apos;2017&apos;: 93.7&#125;,</span><br><span class="line">            &#123;product: &apos;Milk Tea&apos;, &apos;2015&apos;: 83.1, &apos;2016&apos;: 73.4, &apos;2017&apos;: 55.1&#125;,</span><br><span class="line">            &#123;product: &apos;Cheese Cocoa&apos;, &apos;2015&apos;: 86.4, &apos;2016&apos;: 65.2, &apos;2017&apos;: 82.5&#125;,</span><br><span class="line">            &#123;product: &apos;Walnut Brownie&apos;, &apos;2015&apos;: 72.4, &apos;2016&apos;: 53.9, &apos;2017&apos;: 39.1&#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;,</span><br><span class="line">    </span><br><span class="line">    // 系列列表。每个系列通过 type 决定自己的图表类型</span><br><span class="line">    series: [</span><br><span class="line">        &#123;</span><br><span class="line">            type: &apos;bar&apos;,</span><br><span class="line">            startAngle: 300,</span><br><span class="line">            minAngle: 15,</span><br><span class="line">            radius: [&apos;100%&apos;, &apos;60%&apos;],</span><br><span class="line">            center: [&apos;50%&apos;, &apos;50%&apos;],</span><br><span class="line">            barWidth: 20</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            type: &apos;bar&apos;,</span><br><span class="line">            startAngle: 300,</span><br><span class="line">            minAngle: 15,</span><br><span class="line">            radius: [&apos;100%&apos;, &apos;60%&apos;],</span><br><span class="line">            center: [&apos;50%&apos;, &apos;50%&apos;],</span><br><span class="line">            barWidth: 20</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            type: &apos;bar&apos;,</span><br><span class="line">            startAngle: 300,</span><br><span class="line">            minAngle: 15,</span><br><span class="line">            radius: [&apos;100%&apos;, &apos;60%&apos;],</span><br><span class="line">            center: [&apos;50%&apos;, &apos;50%&apos;],</span><br><span class="line">            barWidth: 20</span><br><span class="line">        &#125;</span><br><span class="line">    ],</span><br><span class="line"></span><br><span class="line">    // 调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。</span><br><span class="line">    color:[&apos;#4181E4&apos;,&apos;#5CCED4&apos;],</span><br><span class="line"></span><br><span class="line">    // 背景色，默认无背景。</span><br><span class="line">    backgroundColor:&apos;#eee&apos;,</span><br><span class="line"></span><br><span class="line">    // 全局的字体样式。</span><br><span class="line">    textStyle:&#123;</span><br><span class="line">      color:&apos;#f00&apos;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h1 id="组件其它设置"><a href="#组件其它设置" class="headerlink" title="组件其它设置"></a>组件其它设置</h1><h2 id="颜色渐变"><a href="#颜色渐变" class="headerlink" title="颜色渐变"></a>颜色渐变</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">color:[new echarts.graphic.LinearGradient(</span><br><span class="line">        0, 0, 0, 1,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始</span><br><span class="line">        [</span><br><span class="line">            &#123;offset: 0, color: &apos;#459BF6&apos;&#125;,</span><br><span class="line">            &#123;offset: 1, color: &apos;#61D2D6&apos;&#125;</span><br><span class="line">        ]                //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置</span><br><span class="line">    ),&apos;#556783&apos;],</span><br></pre></td></tr></table></figure>
<h2 id="饼图最小区域面积"><a href="#饼图最小区域面积" class="headerlink" title="饼图最小区域面积"></a>饼图最小区域面积</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">type: &apos;pie&apos;,</span><br><span class="line">minAngle: 15,</span><br></pre></td></tr></table></figure>
<h2 id="y轴文字过长显示省略号"><a href="#y轴文字过长显示省略号" class="headerlink" title="y轴文字过长显示省略号"></a>y轴文字过长显示省略号</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">axisLabel: &#123;</span><br><span class="line">    textStyle: &#123;</span><br><span class="line">        fontSize: getAdapterFont(6),</span><br><span class="line">        color: &apos;#fff&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    interval: 0,</span><br><span class="line">    formatter: function(value) &#123;</span><br><span class="line">        if (value.length &gt; 5) &#123;</span><br><span class="line">        return value.substring(0, 5) + &quot;...&quot;;</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">        return value;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<h1 id="js控制echarts"><a href="#js控制echarts" class="headerlink" title="js控制echarts"></a>js控制echarts</h1><h2 id="window-eventBus实现vue页面与普通js数据通信"><a href="#window-eventBus实现vue页面与普通js数据通信" class="headerlink" title="window.eventBus实现vue页面与普通js数据通信"></a><code>window.eventBus</code>实现vue页面与普通js数据通信</h2><p>重点：用<code>window.eventBus</code>而不是<code>this.eventBus</code>，因为普通js里面的<code>this</code>是代表<code>vue</code>，而普通js获取不到<code>vue</code>的值。</p>
<p>main.js<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">// 引入eventBus</span><br><span class="line">import EventBus from &apos;./bus/eventBus&apos;; </span><br><span class="line">Vue.prototype.$eventBus = EventBus;</span><br><span class="line"></span><br><span class="line">if (window) &#123;</span><br><span class="line">  window.$eventBus = EventBus;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>page.vue<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">window.$eventBus.$emit(&apos;residenceData&apos;, resData.map(v =&gt; v.lx));</span><br></pre></td></tr></table></figure></p>
<p>index.js<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var attackSourcesName = [];</span><br><span class="line">window.$eventBus.$on(&apos;residenceData&apos;,v=&gt;&#123;</span><br><span class="line">    attackSourcesName = v;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></p>
<p><img src="https://wx3.sinaimg.cn/large/0069qZtTgy1gij1jm6zqjj30zw0han25.jpg" alt="image"></p>
<h2 id="echarts与elementUI中的carousel走马灯结合的轮播"><a href="#echarts与elementUI中的carousel走马灯结合的轮播" class="headerlink" title="echarts与elementUI中的carousel走马灯结合的轮播"></a>echarts与elementUI中的carousel走马灯结合的轮播</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-carousel :interval=&quot;3000&quot; arrow=&quot;always&quot; class=&quot;img-box&quot;&gt;</span><br><span class="line">    &lt;el-carousel-item </span><br><span class="line">        v-for=&quot;(item,index) in 2&quot;</span><br><span class="line">        :key=&quot;index&quot; &gt;</span><br><span class="line">        &lt;div v-if=&quot;0 === index&quot;&gt;</span><br><span class="line">            &lt;ehcart ref=&quot;echrts_educationals&quot; config=&apos;home-service-educational&apos; height=&quot;2.32rem&quot; width=&apos;4.63rem&apos;/&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">        &lt;div v-if=&quot;1 === index&quot;&gt;</span><br><span class="line">            &lt;ehcart ref=&quot;echarts_ages&quot; config=&quot;home-ageCollection&quot; height=&quot;2.32rem&quot; width=&apos;4.63rem&apos;/&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">    &lt;/el-carousel-item&gt;</span><br><span class="line">&lt;/el-carousel&gt;</span><br><span class="line"></span><br><span class="line">...</span><br><span class="line"></span><br><span class="line">let echart1 = this.$refs.echrts_educationals[0];</span><br><span class="line">echart1.option.series[0].data = [];</span><br><span class="line">echart1.resizeB();</span><br><span class="line">echart1.refresh();</span><br><span class="line"></span><br><span class="line">let echart2 = this.$refs.echarts_ages[0];</span><br><span class="line">echart2.option.xAxis[0].data = [];</span><br><span class="line">echart2.resizeB();</span><br><span class="line">echart2.refresh();</span><br></pre></td></tr></table></figure>
<p><code>resizeB</code>的具体方法：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">resizeB: function () &#123;</span><br><span class="line">    let timer1 = setTimeout(() =&gt; &#123;</span><br><span class="line">        this.chart.resize()</span><br><span class="line">        // console.log(&apos;调用了改变echart自适应&apos;)</span><br><span class="line">        this.chart.setOption(this.option);</span><br><span class="line">        clearTimeout(timer1)</span><br><span class="line">    &#125;, 400)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="普通的控制显示隐藏"><a href="#普通的控制显示隐藏" class="headerlink" title="普通的控制显示隐藏"></a>普通的控制显示隐藏</h2><p>用<code>v-if</code>，不要用<code>v-show</code>，这样就会重新生成DOM，而不是显示隐藏。</p>
<h1 id="常用图表——折线图、柱状图、饼图"><a href="#常用图表——折线图、柱状图、饼图" class="headerlink" title="常用图表——折线图、柱状图、饼图"></a>常用图表——折线图、柱状图、饼图</h1><h2 id="折线图-line"><a href="#折线图-line" class="headerlink" title="折线图-line"></a>折线图-line</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">option = &#123;</span><br><span class="line">    xAxis: &#123;</span><br><span class="line">        type: &apos;category&apos;,</span><br><span class="line">        data: [&apos;Mon&apos;, &apos;Tue&apos;, &apos;Wed&apos;, &apos;Thu&apos;, &apos;Fri&apos;, &apos;Sat&apos;, &apos;Sun&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    yAxis: &#123;</span><br><span class="line">        type: &apos;value&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    series: [&#123;</span><br><span class="line">        areaStyle:&#123;&#125;, // 添加区域表示有面积</span><br><span class="line">        data: [820, 932, 901, 934, 1290, 1330, 1320],</span><br><span class="line">        type: &apos;line&apos;</span><br><span class="line">    &#125;]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h2 id="柱状图-bar"><a href="#柱状图-bar" class="headerlink" title="柱状图-bar"></a>柱状图-bar</h2><h3 id="柱状图横-竖向显示"><a href="#柱状图横-竖向显示" class="headerlink" title="柱状图横/竖向显示"></a>柱状图横/竖向显示</h3><p>竖向<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">xAxis: &#123;</span><br><span class="line">    type: &apos;category&apos;</span><br><span class="line">&#125;,</span><br><span class="line">yAxis: &#123;</span><br><span class="line">    type: &apos;value&apos;,</span><br><span class="line">    data: [&apos;周一&apos;, &apos;周二&apos;, &apos;周三&apos;, &apos;周四&apos;, &apos;周五&apos;, &apos;周六&apos;, &apos;周日&apos;]</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure></p>
<p>横向<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">xAxis: &#123;</span><br><span class="line">    type: &apos;value&apos;</span><br><span class="line">&#125;,</span><br><span class="line">yAxis: &#123;</span><br><span class="line">    type: &apos;category&apos;,</span><br><span class="line">    data: [&apos;周一&apos;, &apos;周二&apos;, &apos;周三&apos;, &apos;周四&apos;, &apos;周五&apos;, &apos;周六&apos;, &apos;周日&apos;]</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure></p>
<h3 id="堆叠"><a href="#堆叠" class="headerlink" title="堆叠"></a>堆叠</h3><p>重点：所有数据有一个共同的<code>stack</code>，如<code>stack: &#39;总量&#39;</code>。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">series: [</span><br><span class="line">    &#123;</span><br><span class="line">        name: &apos;联盟广告&apos;,</span><br><span class="line">        type: &apos;bar&apos;,</span><br><span class="line">        stack: &apos;总量&apos;,</span><br><span class="line">        data: [220, 182, 191, 234, 290, 330, 310]</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        name: &apos;视频广告&apos;,</span><br><span class="line">        type: &apos;bar&apos;,</span><br><span class="line">        stack: &apos;总量&apos;,</span><br><span class="line">        data: [150, 212, 201, 154, 190, 330, 410]</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        name: &apos;搜索引擎&apos;,</span><br><span class="line">        type: &apos;bar&apos;,</span><br><span class="line">        stack: &apos;总量&apos;,</span><br><span class="line">        data: [820, 832, 901, 934, 1290, 1330, 1320]</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<h2 id="饼图-pie"><a href="#饼图-pie" class="headerlink" title="饼图-pie"></a>饼图-pie</h2><h3 id="普通饼图"><a href="#普通饼图" class="headerlink" title="普通饼图"></a>普通饼图</h3><p>重点：<code>type: &#39;pie&#39;,radius: &#39;55%&#39;,</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">series: [</span><br><span class="line">    &#123;</span><br><span class="line">        name: &apos;访问来源&apos;,</span><br><span class="line">        type: &apos;pie&apos;,</span><br><span class="line">        radius: &apos;55%&apos;,</span><br><span class="line">        data: [</span><br><span class="line">            &#123;value: 335, name: &apos;直接访问&apos;&#125;,</span><br><span class="line">            &#123;value: 310, name: &apos;邮件营销&apos;&#125;,</span><br><span class="line">            &#123;value: 234, name: &apos;联盟广告&apos;&#125;,</span><br><span class="line">            &#123;value: 135, name: &apos;视频广告&apos;&#125;,</span><br><span class="line">            &#123;value: 1548, name: &apos;搜索引擎&apos;&#125;</span><br><span class="line">        ],</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<h3 id="圆环饼图"><a href="#圆环饼图" class="headerlink" title="圆环饼图"></a>圆环饼图</h3><p>重点：<code>type: &#39;pie&#39;,radius: [&#39;50%&#39;, &#39;70%&#39;],</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">series: [</span><br><span class="line">    &#123;</span><br><span class="line">        name: &apos;访问来源&apos;,</span><br><span class="line">        type: &apos;pie&apos;,</span><br><span class="line">        radius: [&apos;50%&apos;, &apos;70%&apos;],</span><br><span class="line">        data: [</span><br><span class="line">            &#123;value: 335, name: &apos;直接访问&apos;&#125;,</span><br><span class="line">            &#123;value: 310, name: &apos;邮件营销&apos;&#125;,</span><br><span class="line">            &#123;value: 234, name: &apos;联盟广告&apos;&#125;,</span><br><span class="line">            &#123;value: 135, name: &apos;视频广告&apos;&#125;,</span><br><span class="line">            &#123;value: 1548, name: &apos;搜索引擎&apos;&#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<h1 id="其它不常用echarts图"><a href="#其它不常用echarts图" class="headerlink" title="其它不常用echarts图"></a>其它不常用echarts图</h1><h2 id="仪表盘"><a href="#仪表盘" class="headerlink" title="仪表盘"></a>仪表盘</h2><p><img src="https://wx2.sinaimg.cn/large/0069qZtTgy1gijgt6p502j306h05owf2.jpg" alt="image"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br></pre></td><td class="code"><pre><span class="line">var value = &apos;4.3&apos;;</span><br><span class="line">var subtext = `样本量：2233`;</span><br><span class="line">var max = 5;</span><br><span class="line">import echarts from &apos;echarts&apos;</span><br><span class="line">export const option = &#123;</span><br><span class="line">    title: &#123;</span><br><span class="line">        show: true,</span><br><span class="line">        text: value || &quot;仪表盘&quot;,</span><br><span class="line">        subtext,</span><br><span class="line">        subtextStyle: &#123;</span><br><span class="line">            align: &quot;center&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line">        left: 400,</span><br><span class="line">        bottom: 10,</span><br><span class="line">        textStyle: &#123;</span><br><span class="line">            color: &apos;#414957&apos;,</span><br><span class="line">            fontSize: 24,</span><br><span class="line">            align: &apos;center&apos;,</span><br><span class="line">            fontFamily: &apos;&quot;Microsoft Yahei&quot;,&quot;微软雅黑&quot;&apos;,</span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">    grid:&#123;x: &apos;5%&apos;, y: &apos;2%&apos;, width: &apos;80%&apos;, height: &apos;90%&apos;&#125;,</span><br><span class="line">    angleAxis: &#123;</span><br><span class="line">        axisLine: &#123;</span><br><span class="line">            show: false</span><br><span class="line">        &#125;,</span><br><span class="line">        axisLabel: &#123;</span><br><span class="line">            show: false</span><br><span class="line">        &#125;,</span><br><span class="line">        splitLine: &#123;</span><br><span class="line">            show: false</span><br><span class="line">        &#125;,</span><br><span class="line">        axisTick: &#123;</span><br><span class="line">            show: false</span><br><span class="line">        &#125;,</span><br><span class="line">        min: 0,</span><br><span class="line">        max: 6.666,</span><br><span class="line">        // boundaryGap: [&apos;0&apos;, &apos;10&apos;],</span><br><span class="line">        startAngle: 225</span><br><span class="line">    &#125;,</span><br><span class="line">    radiusAxis: &#123;</span><br><span class="line">        type: &apos;category&apos;,</span><br><span class="line">        axisLine: &#123;</span><br><span class="line">            show: false</span><br><span class="line">        &#125;,</span><br><span class="line">        axisTick: &#123;</span><br><span class="line">            show: false</span><br><span class="line">        &#125;,</span><br><span class="line">        axisLabel: &#123;</span><br><span class="line">            show: false</span><br><span class="line">        &#125;,</span><br><span class="line">        data: [&apos;a&apos;, &apos;b&apos;, &apos;c&apos;],</span><br><span class="line">        z: 10</span><br><span class="line">    &#125;,</span><br><span class="line">    polar: &#123;</span><br><span class="line">        radius: &apos;100%&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    series: [&#123;</span><br><span class="line">            type: &apos;bar&apos;,</span><br><span class="line">            data: [, , value],</span><br><span class="line">            z: 1,</span><br><span class="line">            coordinateSystem: &apos;polar&apos;,</span><br><span class="line">            barMaxWidth: 18,</span><br><span class="line">            name: &apos;警告事件&apos;,</span><br><span class="line">            roundCap: true,</span><br><span class="line">            color: &apos;#4181E4&apos;,</span><br><span class="line">            barGap: &apos;-100%&apos;,</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            type: &apos;bar&apos;,</span><br><span class="line">            data: [, , ],</span><br><span class="line">            z: 2,</span><br><span class="line">            coordinateSystem: &apos;polar&apos;,</span><br><span class="line">            barMaxWidth: 18,</span><br><span class="line">            name: &apos;警告事件&apos;,</span><br><span class="line">            roundCap: true,</span><br><span class="line">            color: &apos;#f00&apos;,</span><br><span class="line">            barGap: &apos;-100%&apos;,</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            type: &apos;bar&apos;,</span><br><span class="line">            data: [, , max],</span><br><span class="line">            z: 0,</span><br><span class="line">            silent: true,</span><br><span class="line">            coordinateSystem: &apos;polar&apos;,</span><br><span class="line">            barMaxWidth: 18,</span><br><span class="line">            name: &apos;C&apos;,</span><br><span class="line">            roundCap: true,</span><br><span class="line">            color: &apos;#fff&apos;,</span><br><span class="line">            barGap: &apos;-100%&apos;,</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            type: &apos;pie&apos;,</span><br><span class="line">            labelLine: &#123;</span><br><span class="line">                show: false</span><br><span class="line">            &#125;,</span><br><span class="line">            z: 1,</span><br><span class="line">            radius: 14,</span><br><span class="line">            data: [&#123;</span><br><span class="line">                value: 5,</span><br><span class="line">                itemStyle: &#123;</span><br><span class="line">                    color: &apos;rgba(108,116,132,0.15)&apos;,</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;]</span><br><span class="line">        &#125;, &#123;</span><br><span class="line">            type: &apos;pie&apos;,</span><br><span class="line">            labelLine: &#123;</span><br><span class="line">                show: false</span><br><span class="line">            &#125;,</span><br><span class="line">            z: 10,</span><br><span class="line">            radius: 3,</span><br><span class="line">            data: [&#123;</span><br><span class="line">                value: 100,</span><br><span class="line">                itemStyle: &#123;</span><br><span class="line">                    color: &apos;#fff&apos;,</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;]</span><br><span class="line">        &#125;, &#123;</span><br><span class="line">            type: &apos;gauge&apos;,</span><br><span class="line">            radius: &apos;85%&apos;,</span><br><span class="line">            splitNumber: 4,</span><br><span class="line">            max: 5,</span><br><span class="line">            detail: &#123;</span><br><span class="line">                show: false,</span><br><span class="line">            &#125;,</span><br><span class="line">            axisLine: &#123;</span><br><span class="line">                // 坐标轴线</span><br><span class="line">                lineStyle: &#123;</span><br><span class="line">                    // 属性lineStyle控制线条样式</span><br><span class="line">                    color: [</span><br><span class="line">                        [0, &quot;#4181E4&quot;],</span><br><span class="line">                        [1, &quot;#4181E4&quot;]</span><br><span class="line">                    ],</span><br><span class="line">                    width: 25,</span><br><span class="line">                    opacity: 0 //刻度背景宽度</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            &quot;data&quot;: [&#123;</span><br><span class="line">                &quot;name&quot;: &quot;&quot;,</span><br><span class="line">                &quot;value&quot;: value,</span><br><span class="line">            &#125;],</span><br><span class="line">            splitLine: &#123;</span><br><span class="line">                length: 12, //长刻度节点线长度</span><br><span class="line">                lineStyle: &#123;</span><br><span class="line">                    width: 2,</span><br><span class="line">                    color: &quot;#c4c6cc&quot;</span><br><span class="line">                &#125; //刻度节点线</span><br><span class="line">            &#125;,</span><br><span class="line">            axisTick: &#123;</span><br><span class="line">                show: true,</span><br><span class="line">                lineStyle: &#123;</span><br><span class="line">                    color: &quot;#c4c6cc&quot;,</span><br><span class="line">                    width: 2</span><br><span class="line">                &#125;,</span><br><span class="line">                length: 5,</span><br><span class="line">                splitNumber: 6</span><br><span class="line">            &#125;,</span><br><span class="line">            axisLabel: &#123;</span><br><span class="line">                show: false,</span><br><span class="line">                color: &apos;#333&apos;,</span><br><span class="line">                fontSize: 18,</span><br><span class="line">            &#125;,</span><br><span class="line">            pointer: &#123;</span><br><span class="line">                show: true,</span><br><span class="line">                length: &apos;70%&apos;,</span><br><span class="line">                itemStyle: &#123;</span><br><span class="line">                    color: &apos;#DE585D&apos;,</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            &quot;type&quot;: &quot;pie&quot;,</span><br><span class="line">            radius: [&apos;88%&apos;, &apos;82%&apos;],</span><br><span class="line">            &quot;hoverAnimation&quot;: false,</span><br><span class="line">            startAngle: 225,</span><br><span class="line">            endAngle: 0,</span><br><span class="line">            &quot;data&quot;: [&#123;</span><br><span class="line">                    &quot;name&quot;: &quot;&quot;,</span><br><span class="line">                    &quot;value&quot;: value / 5,</span><br><span class="line">                    &quot;label&quot;: &#123;</span><br><span class="line">                        show: false</span><br><span class="line">                    &#125;,</span><br><span class="line">                    &quot;labelLine&quot;: &#123;</span><br><span class="line">                        show: false</span><br><span class="line">                    &#125;,</span><br><span class="line">                    itemStyle: &#123;</span><br><span class="line">                        color: &apos;rgba(0,0,0,0)&apos;</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;,</span><br><span class="line">                &#123; //画中间的图标</span><br><span class="line">                    &quot;name&quot;: &quot;&quot;,</span><br><span class="line">                    &quot;value&quot;: 0,</span><br><span class="line">                    &quot;label&quot;: &#123;</span><br><span class="line">                        position: &apos;inside&apos;,</span><br><span class="line">                        backgroundColor: &apos;#fff&apos;,</span><br><span class="line">                        borderRadius: 7,</span><br><span class="line">                        padding: 3,</span><br><span class="line">                        borderWidth: 0,</span><br><span class="line">                        borderColor: &quot;#fff&quot;</span><br><span class="line"></span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;, &#123;</span><br><span class="line">                    &quot;name&quot;: &quot;&quot;,</span><br><span class="line">                    value: 1.33 - value / 5,</span><br><span class="line">                    &quot;label&quot;: &#123;</span><br><span class="line">                        show: false</span><br><span class="line">                    &#125;,</span><br><span class="line">                    &quot;labelLine&quot;: &#123;</span><br><span class="line">                        show: false</span><br><span class="line">                    &#125;,</span><br><span class="line">                    itemStyle: &#123;</span><br><span class="line">                        color: &apos;rgba(255,255,255,0)&apos;</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            ]</span><br><span class="line">        &#125;</span><br><span class="line">    ],</span><br><span class="line">    tooltip: &#123;</span><br><span class="line">        show: false</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="滚动柱状图排行榜"><a href="#滚动柱状图排行榜" class="headerlink" title="滚动柱状图排行榜"></a>滚动柱状图排行榜</h2><p><img src="https://wx2.sinaimg.cn/large/0069qZtTgy1gijgurb2syj30cw07eq4h.jpg" alt="image"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br></pre></td><td class="code"><pre><span class="line">var index = 0;</span><br><span class="line">var colorList = [&apos;#f36c6c&apos;, &apos;#e6cf4e&apos;, &apos;#20d180&apos;, &apos;#0093ff&apos;];</span><br><span class="line">var attackSourcesName = [&quot;中心村村委会&quot;, &quot;中沟村村委会&quot;, &quot;众众新家园居委会&quot;, &quot;众安居委会&quot;, &quot;光明村村委会&quot;, &quot;光辉村村委会&quot;, &quot;兴银花园居委会&quot;, &quot;北桥居委会&quot;, &quot;北桥村村委会&quot;, &quot;向阳村村委会&quot;, &quot;君临花园居委会&quot;, &quot;君莲新城第一居委会&quot;, &quot;君莲新城第三居委会&quot;, &quot;君莲新城第二居委会&quot;, &quot;君莲新城第五居委会&quot;, &quot;君莲新城第四居委会&quot;, &quot;复地北桥城居委会&quot;, &quot;好世凤凰城居委会&quot;, &quot;安乐村村委会&quot;, &quot;招商雍华苑居委会&quot;, &quot;文博水景居委会&quot;, &quot;日月华城居委会&quot;, &quot;星河湾居委会&quot;, &quot;樱缘花园居委会&quot;, &quot;灯塔村村委会&quot;, &quot;秀龙居委会&quot;, &quot;繁盛苑居委会&quot;, &quot;翔泰苑居委会&quot;, &quot;莘闵荣顺苑居委会&quot;, &quot;都市富苑居委会&quot;, &quot;金榜新苑居委会&quot;, &quot;金都新村第三居委会&quot;, &quot;银春花园居委会&quot;, &quot;银桥花园居委会&quot;, &quot;银都苑第一居委会&quot;, &quot;银都苑第三居委会&quot;, &quot;集体村村委会&quot;, &quot;颛桥村村委会&quot;, &quot;颛溪新村第五居委会&quot;, &quot;颛溪新村第八居委会&quot;, &quot;骏苑居委会&quot;];</span><br><span class="line"></span><br><span class="line">function contains(arr, dst) &#123;</span><br><span class="line">    var i = arr.length;</span><br><span class="line">    while (i -= 1) &#123;</span><br><span class="line">        if (arr[i] == dst) &#123;</span><br><span class="line">            return i;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    return false;</span><br><span class="line">&#125;</span><br><span class="line">option = &#123;</span><br><span class="line">    color:[&apos;#5CCED4&apos;,&apos;#4181E4&apos;],</span><br><span class="line">    dataZoom:[&#123;</span><br><span class="line">        type: &apos;slider&apos;,</span><br><span class="line">        yAxisIndex: 0,</span><br><span class="line">        zoomLock: true,</span><br><span class="line">        width: 10,</span><br><span class="line">        handleSize: 0,</span><br><span class="line">        showDetail: false,</span><br><span class="line">        start: 0,</span><br><span class="line">        end: 16, // 百分比，此处是计算后传过来</span><br><span class="line">        handleIcon: &apos;path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z&apos;,</span><br><span class="line">        handleSize: &apos;100%&apos;,</span><br><span class="line">        handleStyle: &#123;</span><br><span class="line">            color: &quot;#d3dee5&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line">        borderColor: &quot;#90979c&quot;</span><br><span class="line">    &#125;, &#123;</span><br><span class="line">        type: &apos;inside&apos;,</span><br><span class="line">        id: &apos;insideY&apos;,</span><br><span class="line">        yAxisIndex: 0,</span><br><span class="line">        start: 0,</span><br><span class="line">        end: 50,</span><br><span class="line">        zoomOnMouseWheel: false,</span><br><span class="line">        moveOnMouseMove: true,</span><br><span class="line">        moveOnMouseWheel: true</span><br><span class="line">    &#125;],</span><br><span class="line">    tooltip: &#123;</span><br><span class="line">        trigger: &apos;axis&apos;,</span><br><span class="line">        axisPointer: &#123;</span><br><span class="line">            type: &apos;cross&apos;,</span><br><span class="line">            show: false</span><br><span class="line">        &#125;,</span><br><span class="line">        backgroundColor: &apos;#0D2062&apos;,</span><br><span class="line">        extraCssText: &apos;#63C5E0&apos;,</span><br><span class="line">        formatter: function(datas) &#123;</span><br><span class="line">            let res = &apos;&lt;p style=&quot;color:rgba(255,255,255,1);padding:0 5px;font-size: .14rem;&quot;&gt;&apos;+datas[0].axisValue+&apos;&lt;/p&gt;&apos;;</span><br><span class="line">            for(var i in datas) &#123;</span><br><span class="line">                res+=&apos;&lt;p style=&quot;color:rgba(162,214,255,1);padding:0 5px;font-size: .14rem;&quot;&gt;&apos;+datas[i].seriesName + &apos; &apos; +datas[i].value[datas[i].seriesName]+&apos;&lt;/p&gt;&apos;;</span><br><span class="line">            &#125;</span><br><span class="line">            return res</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    grid:&#123;x: &apos;25%&apos;, y: &apos;2%&apos;, width: &apos;70%&apos;, height: &apos;90%&apos;&#125;,</span><br><span class="line">    xAxis: &#123;</span><br><span class="line">        show: true,</span><br><span class="line">        type: &apos;value&apos;,</span><br><span class="line">        splitLine: &#123;</span><br><span class="line">            show: false</span><br><span class="line">        &#125;,</span><br><span class="line">        axisLabel: &#123;</span><br><span class="line">            interval: 0,</span><br><span class="line">            textStyle: &#123;</span><br><span class="line">                fontSize: &apos;12px&apos;,</span><br><span class="line">                color: &apos;#fff&apos;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">    yAxis: &#123;</span><br><span class="line">        type: &apos;category&apos;,</span><br><span class="line">        inverse: true,</span><br><span class="line">        axisLine: &#123;</span><br><span class="line">            show: false</span><br><span class="line">        &#125;,</span><br><span class="line">        axisTick: &#123;</span><br><span class="line">            show: false</span><br><span class="line">        &#125;,</span><br><span class="line">        axisPointer: &#123;</span><br><span class="line">            label: &#123;</span><br><span class="line">                show: true,</span><br><span class="line">                margin: 30</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        data: attackSourcesName,</span><br><span class="line">        axisLabel: &#123;</span><br><span class="line">            interval: 0,</span><br><span class="line">            textStyle: &#123;</span><br><span class="line">                fontSize: &apos;.12rem&apos;,</span><br><span class="line">                color: &apos;#fff&apos;</span><br><span class="line">            &#125;,</span><br><span class="line">            margin: 100,</span><br><span class="line">            fontSize: 14,</span><br><span class="line">            align: &apos;left&apos;,</span><br><span class="line">            color: &apos;#333&apos;,</span><br><span class="line">            rich: &#123;</span><br><span class="line">                a1: &#123;</span><br><span class="line">                    color: &apos;#fff&apos;,</span><br><span class="line">                    backgroundColor: colorList[0],</span><br><span class="line">                    width: 15,</span><br><span class="line">                    height: 15,</span><br><span class="line">                    align: &apos;center&apos;,</span><br><span class="line">                    borderRadius: 2</span><br><span class="line">                &#125;,</span><br><span class="line">                a2: &#123;</span><br><span class="line">                    color: &apos;#fff&apos;,</span><br><span class="line">                    backgroundColor: colorList[1],</span><br><span class="line">                    width: 15,</span><br><span class="line">                    height: 15,</span><br><span class="line">                    align: &apos;center&apos;,</span><br><span class="line">                    borderRadius: 2</span><br><span class="line">                &#125;,</span><br><span class="line">                a3: &#123;</span><br><span class="line">                    color: &apos;#fff&apos;,</span><br><span class="line">                    backgroundColor: colorList[2],</span><br><span class="line">                    width: 15,</span><br><span class="line">                    height: 15,</span><br><span class="line">                    align: &apos;center&apos;,</span><br><span class="line">                    borderRadius: 2</span><br><span class="line">                &#125;,</span><br><span class="line">                b: &#123;</span><br><span class="line">                    color: &apos;#fff&apos;,</span><br><span class="line">                    backgroundColor: colorList[3],</span><br><span class="line">                    width: 15,</span><br><span class="line">                    height: 15,</span><br><span class="line">                    align: &apos;center&apos;,</span><br><span class="line">                    borderRadius: 2</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            formatter: function(params) &#123;</span><br><span class="line">                let index1 = params.indexOf(&apos;#&apos;);</span><br><span class="line">                let num = params.slice(index + 1);</span><br><span class="line">                let newParams = params.slice(0, index1);</span><br><span class="line">                var newParamsName = &quot;&quot;;// 最终拼接成的字符串</span><br><span class="line">                var paramsNameNumber = newParams.length;// 实际标签的个数</span><br><span class="line">                if(paramsNameNumber&lt;=5)&#123;</span><br><span class="line">                  newParamsName = newParams;</span><br><span class="line">                &#125;else&#123;</span><br><span class="line">                  newParamsName = newParams.substring(0,4)  + &quot;...&quot;;</span><br><span class="line">                &#125;</span><br><span class="line">                </span><br><span class="line">                index = contains(attackSourcesName, params) + 1;</span><br><span class="line">                params = newParamsName;</span><br><span class="line">                if (index - 1 &lt; 3) &#123;</span><br><span class="line">                    return [</span><br><span class="line">                        &apos;&#123;a&apos; + index + &apos;|&apos; + index + &apos;&#125;&apos; + &apos;  &apos; + params</span><br><span class="line">                    ].join(&apos;\n&apos;)</span><br><span class="line">                &#125; else &#123;</span><br><span class="line">                    return [</span><br><span class="line">                        &apos;&#123;b|&apos; + index + &apos;&#125;&apos; + &apos;  &apos; + params</span><br><span class="line">                    ].join(&apos;\n&apos;)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    series: [</span><br><span class="line">        &#123;</span><br><span class="line">            name: &apos;户籍&apos;,</span><br><span class="line">            type: &apos;bar&apos;,</span><br><span class="line">            stack: &apos;总量&apos;,</span><br><span class="line">            label: &#123;</span><br><span class="line">                show: true</span><br><span class="line">            &#125;,</span><br><span class="line">            barWidth: 10,</span><br><span class="line">            data: [1, 1, 3, 1, 2, 2, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0]</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            name: &apos;居住&apos;,</span><br><span class="line">            type: &apos;bar&apos;,</span><br><span class="line">            stack: &apos;总量&apos;,</span><br><span class="line">            label: &#123;</span><br><span class="line">                show: true,</span><br><span class="line">                position: &apos;left&apos;</span><br><span class="line">            &#125;,</span><br><span class="line">            barWidth: 10,</span><br><span class="line">            data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 28, 5, 0, 1, 0, 0, 0]</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2020/09/01/TypeScript总结/" rel="next" title="TypeScript总结">
                <i class="fa fa-chevron-left"></i> TypeScript总结
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2020/09/08/百度地图API示例/" rel="prev" title="百度地图API示例">
                百度地图API示例 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
      <div id="lv-container" data-id="city" data-uid="MTAyMC8zODk2OC8xNTQ5Ng=="></div>
    </div>

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="https://upload.jianshu.io/users/upload_avatars/830956/debe5156eed7?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" alt="彭丹丹">
            
              <p class="site-author-name" itemprop="name">彭丹丹</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives">
              
                  <span class="site-state-item-count">183</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">3</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            

          </nav>

          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#链接"><span class="nav-number">1.</span> <span class="nav-text">链接</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#在vue中如何使用"><span class="nav-number">2.</span> <span class="nav-text">在vue中如何使用</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#常见通用配置项"><span class="nav-number">3.</span> <span class="nav-text">常见通用配置项</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#组件其它设置"><span class="nav-number">4.</span> <span class="nav-text">组件其它设置</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#颜色渐变"><span class="nav-number">4.1.</span> <span class="nav-text">颜色渐变</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#饼图最小区域面积"><span class="nav-number">4.2.</span> <span class="nav-text">饼图最小区域面积</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#y轴文字过长显示省略号"><span class="nav-number">4.3.</span> <span class="nav-text">y轴文字过长显示省略号</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#js控制echarts"><span class="nav-number">5.</span> <span class="nav-text">js控制echarts</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#window-eventBus实现vue页面与普通js数据通信"><span class="nav-number">5.1.</span> <span class="nav-text">window.eventBus实现vue页面与普通js数据通信</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#echarts与elementUI中的carousel走马灯结合的轮播"><span class="nav-number">5.2.</span> <span class="nav-text">echarts与elementUI中的carousel走马灯结合的轮播</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#普通的控制显示隐藏"><span class="nav-number">5.3.</span> <span class="nav-text">普通的控制显示隐藏</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#常用图表——折线图、柱状图、饼图"><span class="nav-number">6.</span> <span class="nav-text">常用图表——折线图、柱状图、饼图</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#折线图-line"><span class="nav-number">6.1.</span> <span class="nav-text">折线图-line</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#柱状图-bar"><span class="nav-number">6.2.</span> <span class="nav-text">柱状图-bar</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#柱状图横-竖向显示"><span class="nav-number">6.2.1.</span> <span class="nav-text">柱状图横/竖向显示</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#堆叠"><span class="nav-number">6.2.2.</span> <span class="nav-text">堆叠</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#饼图-pie"><span class="nav-number">6.3.</span> <span class="nav-text">饼图-pie</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#普通饼图"><span class="nav-number">6.3.1.</span> <span class="nav-text">普通饼图</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#圆环饼图"><span class="nav-number">6.3.2.</span> <span class="nav-text">圆环饼图</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#其它不常用echarts图"><span class="nav-number">7.</span> <span class="nav-text">其它不常用echarts图</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#仪表盘"><span class="nav-number">7.1.</span> <span class="nav-text">仪表盘</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#滚动柱状图排行榜"><span class="nav-number">7.2.</span> <span class="nav-text">滚动柱状图排行榜</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">彭丹丹</span>

  
</div>


	<div class="powered-by">
	<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
	  本站访客数:<span id="busuanzi_value_site_uv"></span>
	</span>
	</div>
  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Pisces</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  












  





  

  

  

  
  

  

  

  

  undefined
  
  <!-- 页面爆炸效果 -->
  
<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/tororo.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true}});</script></body>
</html>
